<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #middle{
		width:1000px;
		height:500px;
		margin:100px auto;
		background-color:#000;
	}
	img{
		float:left;
		width:35px;
		height:50px;
		position:relative;
		z-index:2;
		margin-left:100px;
		top:150px;
	}
	#middle span{
		position:relative;
		font-size:50px;
		z-index:2;
		font-weight:bold;
		float:left;
		top:140px;
		left:50px;
        color: #fff;
	}
    </style>
</head>
<body>
    <div id="middle">
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        <span>时</span>
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        <span>分</span>
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
    </div>
</body>
<script>
    // function createZero(n){
    //     if(n<10){
    //         return '0'+n
    //     }else{
    //         return n
    //     }
    // }
    // window.onload = function(){
    //     var Div = document.getElementById('middle');
    //     var Img = document.getElementsByTagName('img');
    //     function tick(){
    //         var date = new Date();
    //         var str=createZero(date.getHours()) + createZero(date.getMinutes()) + createZero(date.getSeconds()); 
    //         for(var i=0;i<Img.length;i++){
    //             Img[i].src="./img/"+str.charAt(i)+".jpg";
    //         }
    //     }
    //     setInterval(tick,1000);
    //     tick();
    // }

    setInterval(function(){

        var Imgs = document.getElementsByTagName('img')
        var date = new Date();

        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        var arr = [
            h<10 ? 0 : Math.floor(h/10),h%10,
            m<10 ? 0 : Math.floor(m/10),m%10,
            s<10 ? 0 : Math.floor(s/10),s%10,
        ]
        for(var i=0;i<Imgs.length;i++){
            Imgs[i].src = './img/' + arr[i]+'.png'
        }


    },1000)
</script>
</html>